<template>
	<div>
		<a-modal v-model="showModal" @ok="confirmOk" @cancel="cancel" :title="titles" width="70%">
			<a-spin :spinning="loading">
				<a-form :form="form">
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="店铺名称" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入" v-decorator="[
                    'couponName',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>

						<a-col :span="12">
							<a-form-item class="mb-15" label="店铺图片" :label-col="labelCol" :wrapper-col="wrapperCol">
								<PreviewImage :showUpload="isShow" class="mt-12" :is-preview="false" :scene="8"
									:show-upload="formgetFileLength(`images`) < 1"
									@uploadSuccess="formuploadSuccess($event, `images`)" v-decorator="[
                    `images`,
                    {
                      rules: [{ required: true, message: '请上传图片', type: 'array' }],
                      initialValue: []
                    }
                  ]" />
							</a-form-item>
						</a-col>
					</a-row>

					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="店铺类型" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-select class="flex-1" @change="changeSelect" placeholder="请选择"
									v-decorator="['couponType', { rules: [{ required: true, message: '请选择' }] }]">
									<a-select-option :value="1">测试数据 </a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="店主名称" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入" v-decorator="[
                    'couponName',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>

					</a-row>
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="手机号" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入" v-decorator="[
                    'couponName',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="店铺描述" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-textarea placeholder="请输入" v-decorator="[
                    'admark',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="300"></a-textarea>
							</a-form-item>
						</a-col>
					</a-row>

					<a-row :gutter="[24,0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="所属商户" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-select>
									<a-select></a-select>
								</a-select>
							</a-form-item>
						</a-col>
					</a-row>


					// 审核显示
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="是否通过" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-radio-group v-model="value" @change="onChange">
									<a-radio :style="radioStyle" :value="1">
										通过
									</a-radio>
									<a-radio :style="radioStyle" :value="2">
										拒绝
									</a-radio>
								</a-radio-group>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="审核描述" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-textarea placeholder="请输入" v-decorator="[
                    'admark',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="300"></a-textarea>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</a-spin>
		</a-modal>
	</div>
</template>
<script>
	import {
		quillEditor
	} from 'vue-quill-editor'
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import {
		get
	} from 'lodash'
	import {
		deductionDetail,
		getBanner
	} from '@/api/newPet'
	export default {
		data() {
			return {
				loading: false,
				isShow: true,
				labelCol: {
					span: 8
				},
				content: '<p>Hello World!</p>',

				editorOption: {
					placeholder: '请输入',
					theme: 'snow',
					modules: {
						toolbar: {
							container: [
								['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
								['blockquote', 'code-block'], // 引用  代码块
								[{
									header: 1
								}, {
									header: 2
								}], // 1、2 级标题
								[{
									list: 'ordered'
								}, {
									list: 'bullet'
								}], // 有序、无序列表
								[{
									script: 'sub'
								}, {
									script: 'super'
								}], // 上标/下标
								[{
									indent: '-1'
								}, {
									indent: '+1'
								}], // 缩进
								// [{ direction: 'rtl' }], // 文本方向
								[{
									size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36']
								}], // 字体大小
								[{
									header: [1, 2, 3, 4, 5, 6]
								}], // 标题
								[{
									color: []
								}, {
									background: []
								}], // 字体颜色、字体背景颜色
								// [{ font: ['songti'] }], // 字体种类
								[{
									align: []
								}], // 对齐方式
								['clean'], // 清除文本格式
								['image'] // 链接、图片，需要视频的可以加上video
							]
						}
					}
				},
				data: [{
						name: '规格1',
						img: '',
						num: 1,
						price: 0
					},
					{
						name: '规格1',
						img: '',
						num: 1,
						price: 0
					}
				],
				columns: [{
						title: '规格名称',
						dataIndex: 'name',
						align: 'center',
						width: 140,
						scopedSlots: {
							customRender: 'name'
						}
					},
					{
						title: '规格图片',
						dataIndex: 'img',
						width: 120,
						align: 'center',
						scopedSlots: {
							customRender: 'img'
						}
					},
					{
						title: '规格库存',
						dataIndex: 'num',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'num'
						}
					},
					{
						title: '规格价格（元）',
						dataIndex: 'price',
						align: 'center',
						width: 70,
						scopedSlots: {
							customRender: 'price'
						}
					},
					{
						title: '老用户专享最高可售库存',
						dataIndex: 'msNum',
						align: 'center',
						width: 110,
						scopedSlots: {
							customRender: 'price'
						}
					},
					{
						title: '老用户最低价格（元）',
						dataIndex: 'msPrice',
						align: 'center',
						width: 110,
						scopedSlots: {
							customRender: 'price'
						}
					},
					{
						title: '操作',
						fixed: 'right',
						dataIndex: 'action',
						width: 110,
						scopedSlots: {
							customRender: 'action'
						},
						align: 'center'
					}
				],

				wrapperCol: {
					span: 16
				},
				details: {},
				showModal: false,
				titles: '新增',
				info: {},
				form: this.$form.createForm(this)
			}
		},
		computed: {},
		watch: {},
		async created() {},
		components: {
			quillEditor
		},
		methods: {
			onEditorBlur(quill) {
				console.log('editor blur!', quill)
			},
			// 获得焦点事件
			onEditorFocus(quill) {
				console.log('editor focus!', quill)
			},
			// 准备富文本编辑器
			onEditorReady(quill) {
				console.log('editor ready!', quill)
			},
			// 内容改变事件，只需要这一个方法就够了
			onEditorChange({
				quill,
				html,
				text
			}) {
				console.log('editor change!', quill, html, text)
				this.content = html
			},
			formgetFileLength(type) {
				//获取图片
				return get(this.form.getFieldValue(type), 'length') || 0
			},
			formuploadSuccess(data, type) {
				this.form.setFieldsValue({
					images: [...this.form.getFieldValue(type), data.path]
				})
			},
			changeSelect(e) {
				console.log(e)
			},
			onChange(e) {
				console.log(e.target.value)
			},
			cancel() {
				this.form.resetFields()
				this.showModal = false
			},
			confirmOk() {
				this.form.validateFields((err, values) => {
					if (!err) {
						// this.loading = true
						const {
							info
						} = this
						if (values.time) {
							values.timeStart = this.$utils.getStartTime(values.time[0])
							values.timeEnd = this.$utils.getEndTime(values.time[1])
						}
						let data = {
							id: info && info.id ? info.id : undefined,
							...this.$utils.trimValue(values),
							isEnabled: typeof values.isEnabled === 'undefined' ? true : values.isEnabled
						}
						console.log('data', values)
						return
						const fun = info && info.id ? deductionDetail : deductionDetail
						fun(data)
							.then(() => {
								this.$message.success(info && info.id ? '修改成功！' : '新增成功！')
								this.$emit('upload')
								this.cancel()
							})
							.finally(() => {
								this.loading = false
							})
					}
				})
			},
			getData() {
				this.loading = true
				deductionDetail({
						id: 1
					})
					.then(data => {
						this.details = data
					})
					.finally(() => (this.loading = false))
			},
			open(data) {
				this.info = data
				console.log(data, '111111')
				if (data.id) {
					this.titles = '修改'
				} else {
					this.titles = '新增'
				}
				this.showModal = true
				// images:['https://img2.baidu.com/it/u=1906732828,3160455141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666']
				this.$nextTick(() => {
					this.form.setFieldsValue({
						isEnabled: true
					})
				})
				// this.$emit('upload')
				// this.$nextTick(() => {
				//     this.form.setFieldsValue({
				// 					...res
				// 				})

				// 			})
			}
		}
	}
</script>
<style lang="less" scoped>
	/deep/ .ant-form-item-label {
		// width: 100px;
	}
</style>